<template>
	<view class='warp' style="padding: 30rpx 0;">
		<view class="orderlist">
			<view class="item " v-for="(item,index) in list" :key="index">
				<!-- <image :src="item.image" class="suolue"></image> -->
				<view class="orderNo">订单编号:{{item.order_id}}</view>
				<view class="money1">创建时间:{{item.add_time}}</view>
				<view class="money2">开票金额: <text class="s-money">￥</text><text class="money">
						{{item.total_price}}</text>
				</view>
			</view>
		</view>
		<view class="orderform">
			<uni-list-item title="发票类型" link>
				<template slot="footer">
					<picker @change="choose1" :value="index2" :range="type2">
						<view class="uni-input">{{invovice_type1}}</view>
					</picker>
				</template>
			</uni-list-item>
			<uni-list-item title="抬头类型" link>
				<template slot="footer">
					<picker @change="choose2" :value="index1" :range="type">
						<view class="uni-input">{{rise_type1}}</view>
					</picker>
				</template>
			</uni-list-item>
			<uni-list-item title="发票抬头">
				<template slot="footer">
					<input type="text" placeholder="请填写发票抬头" class="input" v-model="rise" />
				</template>
			</uni-list-item>
			<uni-list-item title="税号">
				<template slot="footer">
					<input type="text" placeholder="请填写" class="input" v-model="duty" />
				</template>
			</uni-list-item>
			<uni-list-item title="开户银行" rightText="请填写">
				<template slot="footer">
					<input type="text" v-model="bank_name" placeholder="请填写" class="input" />
				</template>
			</uni-list-item>
			<uni-list-item title="银行账号" rightText="请填写">
				<template slot="footer">
					<input type="text" v-model="bank_code" placeholder="请填写" class="input" />
				</template>
			</uni-list-item>
			<uni-list-item title="企业地址" rightText="请填写">
				<template slot="footer">
					<input type="text" v-model="company_address"  placeholder="请填写" class="input" />
				</template>
			</uni-list-item>
			<uni-list-item title="企业电话">
				<template slot="footer">
					<input type="text" v-model="company_mobile" placeholder="请填写" class="input" />
				</template>
			</uni-list-item>
			<!-- <uni-list-item title="设置为默认抬头" showSwitch ></uni-list-item> -->
		</view>
		<view class="footer">
			<button @click="sumbit">提交申请</button>
			<button type="warn" @click="close">不开发票</button>
		</view>


	</view>
</template>

<script>
	import {
		getInvoviceType,
		invoiceAdd,
		getLastInvoice
	} from '../../../api/api.js'
	export default {
		data() {
			return {
				ids: "",
				list: [],
				type: ['企业', '个人'],
				index1: "0",
				index2: "0",
				invovice_type1: "请选择发票类型",
				rise_type1: "请选择发票抬头类型",
				invovice_type: "",
				rise_type: "",
				type2: [],
				fptype: [],
				company_mobile: "",
				company_address: "",
				bank_code: "",
				bank_name: "",
				duty: "",
				rise: "",
			}

		},
		onLoad(opt) {
			this.datainit()
			this.ids = JSON.parse(opt.ids)
			this.list = JSON.parse(opt.list)
			console.log('接收的参数', this.list, this.ids)

		},
		methods: {
			// 不开发票
			close() {
				uni.navigateTo({
					url: "/pages/users/sqkp/index"
				})
			},
			// 提交申请
			sumbit() {
				let data = {
					ids: this.ids,
					invovice_type: this.invovice_type,
					rise_type: this.rise_type,
					rise: this.rise,
					duty: this.duty,
					bank_name: this.bank_name,
					bank_code: this.bank_code,
					company_address: this.company_address,
					company_mobile: this.company_mobile,
				}
				invoiceAdd(data).then(res => {
					uni.showToast({
						title: res.msg,
						icon:"none"
					})
					if(res.status == 200) this.close()
						
					
				})
			},
			// 初始化
			datainit() {
				getInvoviceType().then(res => {
					this.fptype = res.data
					let list = []
					res.data.forEach(item => {
						list.push(item.name)
					})
					console.log('list', list)
					this.type2 = list
				})
				getLastInvoice().then(res=>{
					let data = res.data
					this.company_mobile = data.company_mobile
					this.company_address = data.company_address
					this.bank_code = data.bank_code
					this.bank_name = data.bank_name
					this.duty = data.duty
					this.rise = data.rise
					this.rise_type = data.rise_type
					this.invovice_type = data.invovice_type
				})
			},
			choose1(e) {
				console.log(e)
				this.invovice_type1 = this.type2[e.detail.value]
				console.log(this.type2,'0909')
				this.fptype.forEach((item, index) => {
					if (item.name == this.invovice_type1) {
						this.invovice_type = item.id
					}
				})

			},
			choose2(e) {
				console.log(e)
				this.rise_type1 = this.type[e.detail.value]
				this.rise_type = e.detail.value
			},
		}

	}
</script>

<style scoped lang='less'>
	.warp {
		width: 100%;
		height: 100%;
		background-color: #F4F5F6;
	}

	.orderlist {
		width: 90%;
		/* margin-top: 20rpx; */
		transform: translateX(-50%);
		margin-left: 50%;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		.item {
			position: relative;
			height: 200rpx;
			border-bottom: 1rpx solid #EEEEEE;
			padding-bottom: 15rpx;

			image {
				position: absolute;
				top: 30rpx;
				left: 30rpx;
			}

			.orderNo {
				position: absolute;
				top: 30rpx;
				color: #333333;
				left: 30rpx;
			}

			.money1 {
				position: absolute;
				top: 100rpx;
				color: #999999;
				left: 30rpx;
			}

			.money2 {
				position: absolute;
				bottom: 10rpx;
				color: #333333;
				right: 30rpx;
			}
		}
	}

	.orderform {
		width: 90%;
		/* margin-top: 20rpx; */
		transform: translateX(-50%);
		margin-left: 50%;
		margin-top: 30rpx;
		/* padding: 30rpx; */
		background-color: #FFFFFF;
		border-radius: 10rpx;

		.input {
			text-align: right;
			font-size: 24rpx;
			color: #999999;
		}
	}

	/deep/.uni-popup__wrapper-box.data-v-7da806a4 {
		display: block;
		position: relative;
		background-color: #fff;
	}

	.footer {
		width: 100%;
		height: 400rpx;
		/* display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column; */
		line-height: 300rpx;
		background-color: #f4f5f6;
	}

	.uni-input {
		font-size: 26rpx;
		color: #666666;
	}
</style>
